<template>
  <div id="AuditList">
    <el-table  :data="tableData"  style="width: 100%">
        <el-table-column prop="index" label="序号" width="160" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.index}}</span>
                <span class="Trapozeid" v-if="scope.row.Speed==100"><i>同步成功</i></span>
            </template>
        </el-table-column>
        <el-table-column prop="task_name" label="任务名称"  align="center">
        </el-table-column>
        <el-table-column prop="sub_set_name" label="归属数据子集" align="center">
        </el-table-column>
<!--        <el-table-column prop="origin_file" label="地图数据文件" align="center">
        </el-table-column> -->
        <el-table-column label="任务状态"  align="center">
            <template slot-scope="scope">
                <span  v-if="(scope.row.task_status == 101010)">待提交</span>
                <span  v-if="(scope.row.task_status == 101020)">待审核</span>
                <span  v-if="(scope.row.task_status == 101030)">已撤回</span>
                <span  v-if="(scope.row.task_status == 101040)">审核通过</span>
                <span  class="DangerColor cursor" v-if="(scope.row.task_status == 101050)" @click="rejectResult(scope.row.audit_remark)">审核驳回</span>
            </template>
        </el-table-column>
        <el-table-column prop="user_name" label="提交人"  align="center">
        </el-table-column>
        <el-table-column prop="update_time" label="提交时间"  align="center">
        </el-table-column>
        <el-table-column label="操作"  align="left">
            <template slot-scope="scope">
                <el-button  v-if="scope.row.task_status == 101020" @click="handleAudit(scope.row,'3')">继续审核</el-button>
                <el-button  v-if="scope.row.task_status == 101040" @click="handleAudit(scope.row,'4')">查看</el-button>
                <el-button  v-if="scope.row.task_status == 101050" @click="handleAudit(scope.row,'4')">查看</el-button>
                <el-button  v-if="scope.row.task_status == 101040&&scope.row.Speed!=100&&scope.row.CompleteState!=200" :loading="scope.row.UploadingState" :type="scope.row.CompleteState==500?'danger':'primary'">
                    <span @click="dialogUpload(scope.row,scope.$index)" v-if="scope.row.CompleteState==900">同步</span>
                    <span v-if="scope.row.CompleteState==333">同步中（{{scope.row.Speed}}%）</span>
                    <span @click="dialogUpload(scope.row,scope.$index)" v-if="scope.row.CompleteState==500">同步失败</span>
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogReject" width="30%" >
        <span>{{audit_remark?audit_remark:'暂无'}}</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogReject = false">确 定</el-button>
        </span>
    </el-dialog>

    <div class="pagination">
      <el-pagination
        background
        layout="sizes ,prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="changPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pagination.page_size"
        :current-page="pagination.page_index"
        :total="pagination.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import AuditMangeService from '../../services/AuditMangeService.js';
import TaskMangeService from '../../services/TaskMangeService.js';
export default {
    data() {
        return {
            AuditMangeService:new AuditMangeService(),
						TaskMangeService:new TaskMangeService(),
            set_id:null,
            tableData: [],
            dialogReject:false,
            audit_remark:null,
            taskState:this.$getWords(101),
            ajaxData: {
                page_index: 1,
                page_size: 10,
            },
            pagination:{
                page_index: 1,
                page_count: 1,
                page_size: 10,
            },
            UploadList:{
                Speed:0,
                UploadingState:false,
                CompleteState:900,//100未开始--300请求中--200请求成功--404请求失败
            },
            UploadListInfo:{
                Speed:0,
                UploadingState:false,
                CompleteState:900,//100未开始--300请求中--200请求成功--404请求失败
            },
            SpeedData:[],
            SpeedState:false,
            SpeedStateInfo:false,
            dialoInd:'',
						iTime:null,
						dialoStat:true
        }
    },

    created() {
        let id = JSON.parse(localStorage.getItem('zhdq_gismanage_dataset')).data_set_id
        this.set_id =id;
        this.ajaxData.data_set_id =id;
        // this.getListData();
				this.taskInitalData();
    },
    methods: {
        //获取任务管理列表；
        async getListData(){
            let res = await this.AuditMangeService.getList(this.ajaxData)  
            if(res.code == 200){
                this.tableData = res.data.task_list.length>0?res.data.task_list:[];
                this.pagination=res.data.pagination;
                var index =(this.pagination.page_index - 1) * this.pagination.page_size;
                this.tableData.map((ele, i) => {
                    this.$set(ele, "index", index + i + 1);
                    this.$set(ele, "Speed",0); 
                    this.$set(ele, "UploadingState",false); 
                    this.$set(ele, "CompleteState",900);  
                });
                this.synchronousSpeed();
            }
        },
        //去审核页面处理
        handleAudit(data,flag){
           this.$router.push({path:'/AuditModule',query:{task_id:data.task_id}})
        },
        //驳回原因；
        rejectResult(remark){
            this.audit_remark =remark;
            this.dialogReject = true;
        },
        //分页操作；
        changPage(page_index){
            this.ajaxData.page_index = page_index;
            // this.getListData();
						this.taskInitalData();
        },
        handleSizeChange(val) {
            this.ajaxData.page_size =val;
            // this.getListData();
						this.taskInitalData();
        },

        //同步物体库
        dialogUpload(val,index){
            this.dialoIndex=index;
            let title=this.tableData[index].CompleteState==500?'是否重新同步数据':'是否同步数据';
            this.$confirm(title, {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            center: true
            }).then(() => {
                this.synchronousGis(val.task_id)
            }).catch(() => {
                
            });
        },
        uploadStatus(){
            this.$once('hook:beforeDestroy', function () {
              this.SpeedStateInfo=true;
            })
            if(this.SpeedState==true&&this.SpeedStateInfo==false){
                this.SpeedState=false;
                setTimeout(()=>{
                    this.synchronousSpeed();
                },5000)
            }
        },

        //同步到智慧地球
        async synchronousGis(id){
            let params={  
	            task_id:id
            }
            let res = await this.AuditMangeService.synchronous_gis(params);
						let _this = this;
            if(res.code==200){
                this.tableData[this.dialoIndex].UploadingState=true;
                this.tableData[this.dialoIndex].CompleteState=333;
								setTimeout(function(){
									_this.taskInitalData();
								},1000)
                this.synchronousSpeed();
            }else if(res.code==500){
                this.tableData[this.dialoIndex].UploadingState=false;
                this.tableData[this.dialoIndex].CompleteState=500;
            }
        },
        //同步进度
        async synchronousSpeed(){
            this.SpeedData=[];
            for(let i=0;i<this.tableData.length;i++){
                if(this.tableData[i].async_status==107030){
										this.tableData[i].UploadingState=true;
										this.tableData[i].CompleteState=200;
										this.tableData[i].Speed=100;
                }
                if(this.tableData[i].async_status==107040){
									this.tableData[i].UploadingState=false;
									this.tableData[i].CompleteState=500;
									this.tableData[i].Speed=0;
                }
                if(this.tableData[i].task_status==101040&&this.tableData[i].async_status==107020){
                    let params={  
                        task_id:this.tableData[i].task_id
                    }
                    let res = await this.AuditMangeService.synchronous_speed(params);
                    this.tableData[i].speedCode=res.code;
                    this.tableData[i].Speed=res.data;
                    this.tableData[i].speedNumber=i;
                    if(this.tableData[i].speedCode==200){
                        if(this.tableData[i].Speed<100){
                            this.SpeedState=true;
                            this.tableData[i].UploadingState=true;
                            this.tableData[i].CompleteState=333;
                        }
                    }
                    if(this.tableData[i].speedCode==500){
                            this.tableData[i].UploadingState=false;
                            this.tableData[i].CompleteState=500;
                    }
                }
            };
            this.uploadStatus();
        },
				
				//重构
				async taskInitalData(){
					let parmes = {
						"page_size":  this.ajaxData.page_size,
						"page_index": this.ajaxData.page_index,
						"task_status_list": [101020,101040]
					}
					let res = await this.TaskMangeService.getTask(parmes);
					if(res.code == 200){
							this.tableData = res.data.list.length>0?res.data.list:[];
							this.pagination=res.data.pagination;
							var index =(this.pagination.page_index - 1) * this.pagination.page_size;
							this.tableData.map((ele, i) => {
									this.$set(ele, "index", index + i + 1);
									this.$set(ele, "Speed",0); 
									this.$set(ele, "UploadingState",false); 
									this.$set(ele, "CompleteState",900); 
							});
							this.synchronousSpeed();
					}
				},
    }
}
</script>
<style lang="scss" scoped>
    #AuditList{
        background-color: #fff;
    }
    .components{
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        i{
            font-size: 72px;
            line-height: 72px;
            margin-bottom: 24px;
        }
        .el-index-title{
            font-size: 24px;
            color: rgba(0,0,0,.85);
            font-weight: 500;
            line-height: 32px;
            margin-bottom: 16px;
        }
        .el-index-description{
            font-size: 14px;
            line-height: 22px;
            color: rgba(0,0,0,.45);
            margin-bottom: 24px;
        }
    }
    .UploOk{i{color: #52c31a;}}
    .uploadEnd{i{color: #f56c6c;}}
    .Trapozeid{
        position: absolute;
        left: -23px;
        top: 9px;
        border-bottom: 19px solid #67c23a;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        height: 0;
        width: 35px;
        -webkit-transform: rotate(-44deg);
        -ms-transform: rotate(-44deg);
        transform: rotate(-44deg);
        color: #fff;
        font-size: 12px;
        i{
            -webkit-transform: scale(0.70,0.80);
            -ms-transform: scale(0.70,0.80);
            transform: scale(0.70,0.80);
            display: block;
            width: 50px;
            margin-left: -4px;
            margin-top: -1px;
        }
    }

</style>
<style lang="scss">
.upload-modal-content{
    .el-dialog__title{font-size: 16px;}
    .el-dialog__header{border-bottom: 1px solid #ebeef5;}
    .el-dialog__footer{border-top: 1px solid #ebeef5;padding: 10px 20px 10px;}
}
</style>


